<template>
  <div class="bg">
    <div class="login">
        <div class="title">
            江洋的网上超市
        </div>
        <div class="main">
            <div class="main-title">
                <h3>用户登录</h3>
            </div>
            <div class="acount">
                <input type="text" placeholder="请输入账号" v-model="name" style="width: 300px;">
            </div>
            <div class="psw">
                <input type="password" placeholder="请输入密码" v-model="pwd" style="width: 300px;">
            </div>
            <div class="handlePwd">
                <div><input type="checkbox">记住密码</div>
                <div><a>忘记密码</a></div>
            </div>
            <div class="button">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="primary" @click="register">注册</el-button>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
    name:'Login',
    setup(){
        const router = useRouter()
        const name = ref(null)
        const pwd = ref(null)

        async function login() {
            try {
                const response = await axios.post('http://127.0.0.1:3007/api/login', { 
                    username: name.value, 
                    password: pwd.value 
                })
                if(!response.data.status){
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                        duration: 2000 // 消息持续时间，单位：毫秒
                    })
                    // 设置登录状态并跳转
                    sessionStorage.setItem('auth', 'true')
                    router.replace({ name: 'home' })
                }else{
                    ElMessage({
                        message: response.data.msg,
                        type: 'warning',
                        duration: 2000 // 消息持续时间，单位：毫秒
                    })
                }

            } catch (error) {
                console.error('登录失败:', error)
            }
        }

        function register(){
            router.push({ name:'register' })
        }

        return { login, register, name, pwd }
    }
}
</script>

<style scoped>
    .bg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-image: url('@/assets/images/loginBg.jpg');
        background-size: cover;
        padding: 100px 200px;
    }
    .login {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .title {
        color: white;
        width: 400px;
        text-align: center;
        margin-bottom: 15px;
        font-size: 25px;
        font-weight: bold;
    }
    .main {
        border: 1px solid #ccc;
        height: 200px;
        width: 400px;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .handlePwd {
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .button {
        display: flex;
        justify-content: space-around;
        width: 100%;
    }
    button {
        border: none;
        background: linear-gradient(to right,#ffb5b5,#F56C6C);
    }
</style>